<template>
	<view class="container user-mycoupon">
		<view class="seed-top">
			<view class="top-list" :class="selTop===item.val&&'top-list-active'" v-for="(item,idx) in topList"
				:key="item.title" @click="selTopChange(item.val)">
				{{item.title}}
				<text class="top-num" v-if="item.num>0">{{item.num}}</text>
			</view>
		</view>
		<view class="coupon-parent">
			<view class="coupon-list-box">
				<couponListVue v-for="item in pageList" :couponData="item" :key="item.id" />

				<view class="not-more" v-if="isLoading">加载中...</view>
				<view class="null-page" v-else-if="pageList.length<=0 ">
					<text class="iconfont">&#xe642;</text>
					<view class="null-page-tips">暂无数据~</view>
				</view>
				<view class="not-more" v-else-if="notMore">没有更多了...</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref, reactive } from 'vue';
	import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
	import { hideLoading, showLoading, showToast } from '@/common/util';
	import couponListVue from '@/components/couponList.vue'
	import api from '../../common/api';

	const isLoading = ref(false)
	const topList = reactive([
		{ title: '全部', val: '' },
		{ title: '未使用', val: '0', num: 0 },
		{ title: '已使用', val: '1', num: 0 },
		{ title: '已过期', val: '2', num: 0 },
	])
	const selTop = ref('')
	const pageList = ref<any[]>([])
	const notMore = ref(true)

	onMounted(async () => {
		getPageList()
	})
	const pageSize = 10
	const pageNum = ref(1)
	const getPageList = async () => {
		showLoading()
		isLoading.value = true
		try {
			const res = await api.findUserCouponList({
				status:selTop.value,
				type:'商城券'
			})
			notMore.value = true
			pageList.value = pageList.value.concat(res.data)
		} finally {
			isLoading.value = false
			hideLoading()
		}
	}
	const loadMore = () => {
		if (isLoading.value) return
		if (notMore.value) return
		pageNum.value = pageNum.value + 1
		getPageList()
	}
	const refreshList = () => {
		notMore.value = false
		pageNum.value = 1
		pageList.value = []
		getPageList()
	}
	onReachBottom(() => {
		//loadMore()
	})
	onPullDownRefresh(() => {
		refreshList()
		uni.stopPullDownRefresh()
	})
	const selTopChange = (val) => {
		selTop.value = val
		refreshList()
	}
</script>

<style lang="scss">
	.user-mycoupon {
		.seed-top {
			background-color: #fff;
		}

		.top-list {
			width: 25%;
			display: inline-block;
			border-bottom: solid 6rpx #fff;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 30rpx;
			color: #5B5B5B;
			position: relative;
		}

		.top-num {
			color: #fff;
			background-color: #FF4F00;
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			border-radius: 30rpx;
			font-size: 24rpx;
			line-height: 30rpx;
			top: 4rpx;
			right: 10rpx;
			font-weight: lighter;
		}

		.top-list-active {
			font-weight: bold;
			color: #17CC77;
			border-bottom: solid 6rpx #17CC77;
		}

		.coupon-parent {
			margin-top: 20rpx;
		}

		.coupon-list-box {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 10rpx;
		}

		.coupon-more {
			color: #666;
			font-size: 26rpx;
			text-align: right;

			.iconfont {
				font-size: 28rpx;
			}
		}
	}
</style>